<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线预订设置</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/pravate/common.css" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js" ></script>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>
	<style>
		.overall{
			line-height: 33px;
			font-size: 14px;
			color: #333333;
			background: #fff;
		}
		.delTitle, .overall, .warpper .warpper-item{
			display: flex;
			padding: 10px;
		}
		.delTitle{
			font-size: 12px;
			color: #999999;
			line-height: 12px;
		}
		.mid {
			flex: 1;
			text-align: center;
		}
		.warpper{
			padding: 0;
			margin: 0;
			font-size: 14px;
			color: #333333;
			line-height: 30px;
		}
		.warpper .warpper-item{
			background: #fff;
			border-bottom: 1px solid #e7e7e7;
		}
		.left{
			width: 80px;
		}
		.right{
			text-align: center;
			width: 100px;
		}
		.right .mui-switch{
			margin: 0 auto;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title title">在线预订设置</h1>
		</header>
		<div class="mui-content">
			<div class="overall">
				<div class="left roomName">
					特价房
				</div>
				<div class="mid roomStatus">
					状态：在售
				</div>
				<div class="right">
					<button type="button" class="mui-btn mui-btn-danger openRoom">关闭该房型</button>
				</div>
			</div>
			<div class="delTitle">
				<div class="left">
					日期
				</div>
				<div class="mid">
					状态
				</div>
				<div class="right">
					操作
				</div>
			</div>
			<ul class="warpper">
				<script type="text/template" id="listTemple">
					{{if status=="success"}}
						{{each data as value i}}
							<li class="warpper-item">
								<div class="left">
									{{value.time}}
								</div>
								<div class="mid">
									{{pay_status(value.isOpen)}}
								</div>
								<div class="right">
									<div class="mui-switch mui-switch-mini {{value.isOpen=='yes'?'mui-active':''}}" data-id='{{value.time}}'>
									  <div class="mui-switch-handle"></div>
									</div>
								</div>
							</li>
						{{/each}}
					{{/if}}
				</script>
			</ul>
		</div>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script>
			mui.plusReady(function(){
				var ws = plus.webview.currentWebview();
				$('.roomStatus').html('状态：'+ws.status);
				$('.roomName').html(ws.name);
				// 获取房型状态信息
				if(ws.status==='在售'){
					$('.openRoom').html('关闭该房型');
					$('.openRoom').addClass('mui-btn-danger');
					$('.openRoom').removeClass('mui-btn-success');
				}else{
					$('.openRoom').html('开启该房型');
					$('.openRoom').addClass('mui-btn-success');
					$('.openRoom').removeClass('mui-btn-danger');
				}
				var data={
					code: 0,
					data:[]
				}
				require(weburl + BookingRoomClassDateTimeList, "json", "post", {
					token: localStorage.getItem("token"),
					roomclass_id: ws.roomId
				}, function(response) {
					console.log(JSON.stringify(response));
					if(response.status==='success'){
						var str = template("listTemple",response);
						$(".warpper").html(str);
					}else{
						var str = template("listTemple",data);
						$(".warpper").html(str);
					}
				},function(){
					
				})
				//在售状态
				template.defaults.imports.pay_status=function(statu) {
					var sta = "";
					switch(statu+'') {
						case 'yes':
							//已取消
							sta = "在售";
							break;
						case 'no':
							//待确认
							sta = "已关闭";
							break;
					}
					return sta;
				}
				// 点击关闭或者开启某个操作
				mui('body').on('tap','.right .mui-switch',function(){
					var that=$(this); 
					require(weburl + CloseRoom, "json", "post", {
						token: localStorage.getItem("token"),
						Time: that.attr('data-id'),
						roomclass_id: ws.roomId
					}, function(response) {
						if(response.status==='success'){
							if(that.hasClass('mui-active')){
								that.removeClass('mui-active');
							}else{
								that.addClass('mui-active');
							}
						}else{
							mui.alert(response.msg,' ','关闭',function(){},'div');
						}
					},function(){
						mui.alert('网络错误，请稍后再试',' ','关闭',function(){},'div');
					})
					
				})
				// 开启/关闭该房型
				mui('body').on('tap','.openRoom',function(){
					var that=$(this);
//					mui.confirm('是否'+$(this).html(),'',['确定','取消'],function(e){
//						if(e.index==0){//点击了确定
							require(weburl + CloseRoomAction, "json", "post", {
								token: localStorage.getItem("token"),
								roomclass_id: ws.roomId
							}, function(response) {
								console.log(JSON.stringify(response));
								if(response.status==='success'){
									if(that.hasClass('mui-btn-danger')){  //改变为开启状态
										$('.openRoom').html('开启该房型');
										$('.roomStatus').html('状态：已关闭');
										$('.openRoom').addClass('mui-btn-success');
										$('.openRoom').removeClass('mui-btn-danger');
									}else{
										$('.openRoom').html('关闭该房型');
										$('.roomStatus').html('状态：开启');
										$('.openRoom').addClass('mui-btn-danger');
										$('.openRoom').removeClass('mui-btn-success');
									}
								}
								console.log(JSON.stringify(response));
							},function(){
								mui.alert('网络错误，请稍后再试',' ','关闭',function(){},'div');
							})
//						}
//					},'div');
				})
			})
		</script>
	</body>

</html>